<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Quality</title>

    <script type="text/javascript" src="../js/d3.js"></script>
    <script type="text/javascript" src="../js/dimple.v2.1.0.js"></script>

    <style type="text/css">
        body {
            text-align: left;
            font: 12px sans-serif;
        }
        svg {
        	font: 12px sans-serif;
        } div.tooltip {
            position: absolute;
            text-align: left;
            padding: 8px;
            font: 10px sans-serif;
            background: #ddd;
            border: solid 1px #aaa;
            border-radius: 8px;
            pointer-events: none;
        }
    </style>

</head>

<body>

    <div style="font-size:20px;width:400px;margin-left:auto;margin-right:auto;margin-bottom: 10px;">งานประกันคุณภาพ</div>
    <div style="min-width: 1750px;">
        <div style="display:inline-block;margin-left:5px;vertical-align:top;">
            <a href="../index.html">
                <img src="../images/home_icon.png" width="50" height="50">
            </a>
        </div>
        <div style="display:inline-block;">
            <div id="chartContainer" style="display:inline-block;"></div>
        </div>
        <div style="display:inline-block;">
            <div id="stackBarChart" style="display: inline-block;"></div>
        </div>
    </div>
    <div id="comment">
        <div id="strength"></div>
        <div id="weak"></div>
    </div>

    <!--<div id="chartContainer"></div>-->

    <script type="text/javascript">
        d3.json("../QLT001Controller?parameter=getQltPoint", function(error, data) {
            genQualityLineChart(data);
            
            d3.json("../QLT001Controller?parameter=getQltFacPoint", function(error, data) {
                genQualityGroupBar(data);
            });
        });

        function genQualityLineChart(data) {
                console.dir(data);
                var svg = dimple.newSvg("#chartContainer", 630, 400);
                var myChart = new dimple.chart(svg, data);
                myChart.setBounds(50, 50, 400, 300);
                var x = myChart.addCategoryAxis("x", "acadYear");
                var y = myChart.addMeasureAxis("y", "point");

                x.title = "ปี";
                y.title = "คะแนน"

                var lines = myChart.addSeries("qltElement", dimple.plot.line);
                lines.addOrderRule("qltElement");
                lines.lineWeight = 5;
                lines.lineMarkers = true;

                lines.addEventHandler("click", onClick);

                var myLegend = myChart.addLegend(450, 30, 60, 300, "Right");

                myChart.draw();

                var legendText = myLegend.shapes.selectAll("text");

                legendText.forEach(function(d, i) {
                    if (i === 0) {
                        d[0].textContent = "คะแนนเฉลี่ย";
                    } else {
                        d[0].textContent = "องค์ประกอบที่ " + i;
                    }

                });

                myChart.legends = [];

                myChart.data = dimple.filterData(data, "qltElement", ["0"]);

                myChart.draw();

                d3.selectAll("rect").style("opacity", 0.2);
                d3.selectAll(".dimple-0").select("rect").style("opacity", 0.8);

                var filterValues = dimple.getUniqueValues(data, "qltElement");
                myLegend.shapes.selectAll("rect")
                    .on("click", function(e) {
                        myChart.data = dimple.filterData(data, "qltElement", e.key.toString());
                        data.forEach(function(d) {
                            d3.selectAll(".dimple-" + d.qltElement).select("rect").style("opacity", 0.2);
                        });
                        d3.selectAll(".dimple-" + e.key).select("rect").style("opacity", 0.8);
                        myChart.draw(800);

                    }); // end on click

                function onClick(e) {
                    d3.json("../QLT001Controller?acadYear=" + e.xValue + "&qltElement=" + e.seriesValue[0], function(error, data) {
                        var strength;
                        var weak;
                        if ((typeof data[0].strength == 'undefined') || (!data[0].strength.length)) {
                            strength = "no comment";
                        } else {
                            strength = data[0].strength;
                        }
                        if ((typeof data[0].weak == 'undefined') || (!data[0].weak.length)) {
                            weak = "no comment";
                        } else {
                            weak = data[0].weak;
                        }
                        var patt = /\x0a/g;
                        document.getElementById('strength').innerHTML = "<b>จุดแข็ง: </b> <br/>" + strength.replace(patt, '<br/>');
                        document.getElementById('weak').innerHTML = "<b>จุดอ่อน: </b><br/>" + weak.replace(patt, '<br/>');
                    });
                }

            } //end gen

        function genQualityGroupBar(data) {

                var qltData = d3.nest()
                    .key(function(d) {
                        return d.year;
                    })
                    .entries(data);
                //stack bar
                var margin = {
                        top: 10,
                        right: 270,
                        bottom: 30,
                        left: 30
                    },
                    width = 1000 - margin.left - margin.right,
                    height = 400 - margin.top - margin.bottom;

                var x0 = d3.scale.ordinal()
                    .rangeRoundBands([0, width], .1);

                var x1 = d3.scale.ordinal();

                var y = d3.scale.linear()
                    .range([height, 0]);

                var color = d3.scale.category20();
                //var color = d3.scale.ordinal()
                //.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

                var xAxis = d3.svg.axis()
                    .scale(x0)
                    .orient("bottom");

                var yAxis = d3.svg.axis()
                    .scale(y)
                    .orient("left")
                    .tickFormat(d3.format(".1f"));

                var svg = d3.select("#stackBarChart").append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                    .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

                //var facNames = d3.keys(qltData[0]).filter(function(key) { return key !== "State"; });
                var facNames = [];
                qltData[0].values.forEach(function(d) {
                    facNames.push(d.facName);
                })

                x0.domain(qltData.map(function(d) {
                    return d.key;
                }));
                x1.domain(facNames).rangeRoundBands([0, x0.rangeBand()]);
                y.domain([0, d3.max(qltData, function(d) {
                    return d3.max(d.values, function(d) {
                        return d.point;
                    });
                })]);


                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis);

                svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis)
                    .append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", 6)
                    .attr("dy", ".71em")
                    .style("text-anchor", "end")
                    .text("คะแนน");

                var state = svg.selectAll(".state")
                    .data(qltData)
                    .enter().append("g")
                    .attr("class", "g")
                    .attr("transform", function(d) {
                        return "translate(" + x0(d.key) + ",0)";
                    });

                state.selectAll("rect")
                    .data(function(d) {
                        return d.values;
                    })
                    .enter().append("rect")
                    .attr("width", x1.rangeBand())
                    .attr("x", function(d) {
                        return x1(d.facName);
                    })
                    .attr("y", function(d) {
                        return y(d.point);
                    })
                    .attr("height", function(d) {
                        return height - y(d.point);
                    })
                    .style("fill", function(d) {
                        return color(d.facName);
                    })
                    .on("mouseover", mouseover)
                    .on("mouseout", mouseout);

                //append tooltip
                var tip = d3.select("body").append("div")
                    .attr("class", "tooltip")
                    .style("opacity", 1e-6);

                function mouseover(d) {
                    d3.select(this).style("opacity", 0.3);
                    tip.transition().duration(500).style("opacity", 1);
                    tip.html("คณะ : " + d.facName + "<br/> ปีการศึกษา: " + d.year + "<br/>คะแนน: " + d.point)
                        .style("left", (d3.event.pageX - 34) + "px")
                        .style("top", (d3.event.pageY - 12) + "px");
                }

                function mouseout() {
                    d3.select(this).style("opacity", 1);
                    tip.transition().duration(500).style("opacity", 1e-6);
                }

                var legend = svg.selectAll(".legend")
                    .data(facNames.slice())
                    .enter().append("g")
                    .attr("class", "legend")
                    .attr("transform", function(d, i) {
                        return "translate(0," + i * 20 + ")";
                    });

                legend.append("rect")
                    .attr("x", width - 10)
                    .attr("width", 18)
                    .attr("height", 18)
                    .style("fill", color);

                legend.append("text")
                    .attr("x", width + 10)
                    .attr("y", 9)
                    .attr("dy", ".35em")
                    .style("text-anchor", "start")
                    .text(function(d) {
                        return d;
                    });

            } // end gen
    </script>

</body>
</html>